<template>
	<view class="content">
		<swiper autoplay="true" interval="2000" indicator-active-color="red" indicator-dots circular>
      <swiper-item v-for="(item,index) in swiper" :key="index" @click="goPage(item)">
        <image mode="scaleToFill" :src="item.image_src"></image>
      </swiper-item>
    </swiper>
    
    <view class="feilei">
      <view class="fenlei-item">
        <view class="item-bck">
          <image src="../../static/icon/gouwu.png"></image>
        </view>
        <view style="margin-top: 5rpx;">黑马超市</view>
      </view>
      <view class="fenlei-item">
        <view class="item-bck">
          <image src="../../static/icon/xinxi.png"></image>
        </view>
        <view style="margin-top: 5rpx;">联系我们</view>
      </view>
      <view class="fenlei-item">
        <view class="item-bck">
          <image src="../../static/icon/shipin.png"></image>
        </view>
        <view style="margin-top: 5rpx;">黑马超市</view>
      </view>
      <view class="fenlei-item">
        <view class="item-bck">
          <image src="../../static/icon/tupian.png"></image>
        </view>
        <view style="margin-top: 5rpx;">黑马超市</view>
      </view>
    </view>
    
    <view class="tuijian">
      <view class="title">
        推 荐 商 品
      </view>
      <view class="shopList">
        <view class="shop">
          推荐商品
        </view>
        <view class="shop">
          推荐商品
        </view>
        <view class="shop">
          推荐商品
        </view>
        <view class="shop">
          推荐商品
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import {getLunbo} from '@/api/shouye.js';
	export default {
		data() {
			return {
				title: 'Hello',
        swiper:[],
			}
		},
		onLoad() {
      this.getSwiper();
		},
		methods: {
      async getSwiper(){
        let res=await getLunbo();
        if(res.data.meta.status==200){
          this.swiper=res.data.message;
          console.log(this.swiper);
        }
      },
      goPage({goods_id,navigator_url,open_type}){
        console.log(open_type=="navigate")
        if(open_type=="navigate"){
          uni.navigateTo({
            url:navigator_url,
          })
        }
      }
		},
	}
</script>

<style lang="less">
  page {
    background-color: #d4d4d4;
  }
  swiper{
    width: 100%;
    height: 400rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .feilei {
    width: 100%;
    height: 180rpx;
    display: flex;
    background-color: red;
    padding: 10rpx 0rpx;
    background-color: aliceblue;
    .fenlei-item{
      height: 180rpx;
      width: 127.5rpx;
      margin: 0rpx 30rpx;
      flex-direction: column;
      display: flex;
      font-size: 30rpx;
      .item-bck {
        width: 120rpx;
        height: 120rpx;
        background-color: red;
        margin: 5rpx 0rpx;
        display: flex;
        border-radius: 63.75rpx;
        justify-content: center;
        align-items: center;
      }
      image {
        width: 50%;
        height: 50%;
      }
    }
  }
  .tuijian {
    .title{
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
      margin: 5px 0px 0px;
      font-size: 40rpx;
      color: #d90004;
      box-shadow: 1px 1px 2px gray;
      background-color: aliceblue;
    }
    .shopList{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .shop {
        width: 367rpx;
        height: 400rpx;
        margin: 4rpx;
        box-shadow: 1px 1px 1px lightgray;
        background-color: aliceblue;
        padding: 5rpx;
        box-sizing: border-box;
      }
    }
  }
</style>
